import React from "react";
import { Datum } from "@/type/HomeType";
import { useNavigate } from "react-router-dom";
import "./NavGrid.scss";

interface NavGridProps {
   navList: Datum[];
}

const NavGrid: React.FunctionComponent<NavGridProps> = ({ navList }) => {
   const navigate = useNavigate();
   return (
      <ul className="nav-grid">
         {
            navList.map((item, index) => {
               return (
                  <li key={index} className="nav-grid-item" onClick={() => navigate(`/good-list?categoryId=${item.link.id}`)}>
                     <img src={item.imgUrl} alt="" />
                     <span>{item.text}</span>
                  </li>
               );
            })
         }
      </ul>
   );
};

export default NavGrid;
